<template>
  <div>
    <!-- 查询输入框和按钮 -->
    <input
      type="text"
      v-model="searchText"
      placeholder="房屋号"
      class="input1"
      id="houseNumberInput"
      name="houseNumberInput"
    />
    <button class="but1" @click="searchHouses">查询</button>
    <button class="but1" @click="resetSearch">重置</button>
    <button id="bute" @click="homeadd">新增房屋</button>
    <button class="but1">批量导入</button>
  </div>
  <div>
    <!-- 表格 -->
    <el-table :data="displayedData" stripe>
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="housesId" label="房屋编号"></el-table-column>
      <el-table-column prop="floor" label="楼层"></el-table-column>
      <el-table-column prop="nature" label="类型"></el-table-column>
      <el-table-column prop="usageArea" label="面积"></el-table-column>
      <el-table-column prop="apartmentId" label="公寓id"></el-table-column>
      <el-table-column prop="updateDate" label="更新时间"></el-table-column>
      <el-table-column prop="status" label="房屋状态"></el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        min-width="250"
      >
        <template #default="scope">
          <span style="font-size: 12px; color: #2561ef" @click="check">
            查看
          </span>
          &emsp;
          <span style="font-size: 12px; color: #2561ef">编辑</span>
          &emsp;
          <span
            style="font-size: 12px; color: #2561ef"
            @click="deleterow(scope.row)"
          >
            删除
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { getAll, deleteHouse, getHouseById } from '@/api/home-list'

export default {
  setup() {
    const searchText = ref('') // 用户输入的搜索关键字
    const total = ref(0)
    const currentPage = ref(1)
    const pageSize = ref(5)
    const tableData = ref([])
    const filteredData = ref([]) // 过滤后的数据
    const filteredTotal = computed(() => filteredData.value.length) // 过滤后的总条数
    const router = useRouter()

    // 计算当前页面要显示的数据
    const displayedData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return filteredData.value.slice(start, end)
    })

    onMounted(async () => {
      const res = await getAll()
      tableData.value = res.data
      total.value = tableData.value.length
      filteredData.value = tableData.value
    })

    // 搜索房屋
    async function searchHouses() {
      if (searchText.value) {
        try {
          const result = await getHouseById(searchText.value)
          if (result.data) {
            filteredData.value = [result.data] // 假设返回的是单个对象，这里将其转为数组
          } else {
            filteredData.value = []
          }
        } catch (error) {
          console.error('搜索时发生错误:', error)
          alert('搜索时发生错误，请检查输入或稍后再试。')
        }
      } else {
        // 如果没有输入，则显示所有数据
        filteredData.value = tableData.value
      }
      currentPage.value = 1 // 重置当前页为第一页
    }

    // 重置搜索
    function resetSearch() {
      searchText.value = ''
      filteredData.value = tableData.value
      currentPage.value = 1 // 重置当前页为第一页
    }

    async function deleterow(row) {
      if (confirm('确定删除吗？')) {
        const result = await deleteHouse(row.housesId)
        if (result.data) {
          alert('删除成功')
          location.reload()
        } else {
          alert('删除失败')
        }
      }
    }

    function homeadd() {
      router.push({ path: '/test2/home-add' })
    }

    function check() {
      router.push({ path: '/test2/home-check' })
    }

    // 当前页码变化时触发
    function handleCurrentChange(val) {
      currentPage.value = val
    }

    return {
      searchText,
      total,
      currentPage,
      pageSize,
      homeadd,
      getAll,
      tableData,
      deleterow,
      displayedData,
      handleCurrentChange,
      searchHouses,
      resetSearch,
      filteredTotal,
      check,
    }
  },
}
</script>

<style>
/* 样式 */
.search {
  width: 15%;
  margin-bottom: 20px;
  margin-right: 20px;
}

.input1 {
  margin-left: 10px;
}

.but1 {
  margin-left: 10px;
}

#bute {
  margin-left: 900px;
}
</style>
